<%--
  Created by IntelliJ IDEA.
  User: xiong
  Date: 2020/7/7
  Time: 9:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页</title>
  <script src="/js/jquery-3.5.1.min.js"></script>
  <style>
    body{
      /*  background-color: green;*/
      height: 650px;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .top{
      width: 90%;
      margin-left: 5%;
      height:20% ;
      /*background-color: orange;*/
    }
    .main{
      width:90%;
      margin-left: 5%;
      height: 80%;

    }
    .personal{
      width: 100%;
      height: 20%;
      /*background-color: white;*/
    }
    .top_main{
      width: 100%;
      height: 80%;
      /*background-color: #999;*/
    }
    .personal ul{
      list-style-type: none;
      float: right;
    }
    .personal li{
      float: left;
      margin-left: 10px;
      font-size: 14px;

    }
    .personal a{
      text-decoration: none;
      color: black;
    }
    .personal a:hover{
      color: red;
    }
    .logo{
      width: 30%;
      height: 100%;
      /*background-color: deeppink;*/
      float: left;
    }
    .logo img{
      width: 100%;
      height: 100%;
    }
    .search{
      width: 70%;
      height: 100%;
      margin-left: 30%;
      /*background-color: greenyellow;*/
    }
    .search input{
      margin-top: 5%;
      border:1px red solid;

    }
    .search .txt{
      width: 300px;
      height: 30px;
    }
    .search .btn{
      width: 70px;
      height: 32px;
      background-color: red;
      color: white;
      position: relative;
      left: -4px;
    }
    .left{
      width: 20%;
      height: 100%;
      float: left;
    }
    .right{
      width: 80%;
      height: 100%;
      margin-left: 20%;
    }
    .left ul{

      list-style-type: none;
      margin-top: 20px;

    }
    .left li{
      text-align: center;
      line-height: 30px;

    }
    .left li a{
      display: inline-block;
      text-decoration: none;
      color: #000000;
      background: beige;
      margin-top: 5px;
      width: 100%;
    }
    .left li a:hover{
      background-color: red;
      color: white;
    }
    .right iframe{
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div class="top">
  <!--    个人信息页-->
  <div class="personal">
    <ul>
<%--      获取session中的用户信息--%>
      <li><span>${userDetail.username}</span></li>
      <li><a href="/car.jsp" target="main">购物车</a></li>
      <li><a href="/order/selectByUser" target="main">历史订单</a></li>
    </ul>
  </div>
  <!--    顶部搜索，logo图标-->
  <div class="top_main">
    <div class="logo">
      <img src="/img/tm.PNG" alt="">
    </div>
    <div class="search">
      <form action="/book/search" method="post" target="main">
        <input type="text" placeholder="请输入书名" class="txt" name="searchName">
        <input type="submit" value="搜索" class="btn" >
      </form>
    </div>
  </div>

</div>
<div class="main">
  <div class="left">
    <!--书籍分类-->
    <ul>
      <c:forEach items="${booktypes}" var="type">
        <li><a href="/book/getType?id=${type.id}" target="main">${type.typename}</a></li>
      </c:forEach>
    </ul>
  </div>
  <div class="right">
    <!--        模块化加载-->
    <iframe name="main"  src="books.jsp" scrolling="no" frameborder="no"></iframe>
  </div>
</div>

</body>
</html>
<script>


</script>

